<script setup lang="ts">
import { ref } from 'vue';
import getMenu, { IMenus, IMenuItem } from '@/markdowns';

const menuData = ref<IMenus[]>([]);
const currentCpm = ref<unknown>(null);

onMounted(() => {
  menuData.value = getMenu;
});
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleClick = (item: IMenuItem) => {
  console.log(item);
  currentCpm.value = item.component;
};
</script>

<template>
  <div class="box">
    <div class="menubar">
      <el-scrollbar>
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-sub-menu v-for="item in menuData" :key="item.title" :index="item.title">
            <template #title>
              <el-icon :size="20"><Sugar /></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.subtitle"
              :index="child.subtitle"
              @click="(item) => handleClick(child)"
            >
              {{ child.subtitle }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="container">
      <div class="header"></div>
      <div class="page-box page-box_wrapper">
        <el-scrollbar>
          <component :is="currentCpm"></component>
          <el-backtop :right="100" :bottom="100" target=".page-box_wrapper .el-scrollbar__wrap" />
        </el-scrollbar>
      </div>

      <TheFooter class="footer"></TheFooter>
    </div>
  </div>
</template>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.menubar {
  width: 240px;
  height: 100%;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}
.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  .footer {
    margin-top: 10px;
    height: 31px;
    width: 100%;
  }
  .header {
    width: 100%;
    height: 60px;
  }
  .page-box {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
